<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html: charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link rel="stylesheet" type="text/css" href="plugins/swiper-3.4.2/swiper-3.4.2.min.css">
        <link rel="stylesheet" type="text/css" href="styles/page.css">
        <title>准时吃</title>
        <script src="plugins/jquery-3.2.1.min.js"></script>
        <script src="plugins/swiper-3.4.2/swiper-3.4.2.jquery.min.js"></script>
    </head>
    
    <body>
        <div class="container-center">

            <div id="header" class="flex-container">
                <h4 id="restName" class="">百香味工作餐</h4>
                <div class="header-icon-container  flex-container">
                    <a href="#" class="header-icon ">
                        <img alt="heart" src="images/heart.png">
                    </a>
                    <a href="#" class="header-icon ">
                        <img alt="image" src="images/image.png">
                    </a>
                    <a href="#" class="header-icon ">
                        <img alt="home" src="images/home.png">
                    </a>
                </div>
            </div>

            <div class="flex-container content-container">
                <div id="leftContent" class="swiper-container">
                    <div class="swiper-wrapper left">
                        <div class="swiper-slide tab active">店家推荐</div>
                        <div class="swiper-slide tab">米线</div>
                        <div class="swiper-slide tab">套餐</div>
                        <div class="swiper-slide tab">面条</div>
                    </div>
                </div>
                <div id="rightContent" class="swiper-container">
                    <div class="swiper-wrapper right">
                        <div class="swiper-slide card flex-container">
                            <div id="recm">
                                <div class="tips-container">
                                    <p class="tips-context">
                                        <span>店家推荐</span>
                                    </p>
                                </div>
                                <div class="flex-container card-container">
                                    <div class="card-content img-container">
                                        <img alt="image" src="images/img.jpg" class="card-img">
                                    </div>
                                    <div class="card-content info-container">
                                        <div class="info-content">
                                            <h4 class="info">意大利面</h4>
                                            <div class="info promotions">
                                                <div class="info-left">8.8折，限购两份</div>
                                                <div class="info-right">活动不同享</div>
                                            </div>
                                            <div class="cost">
                                                <h4>￥26.5</h4>
                                                <img class="plus" src="images/plus.png" arl="plus-circle">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex-container card-container">
                                    <div class="card-content img-container">
                                        <img alt="image" src="images/img.jpg" class="card-img">
                                    </div>
                                    <div class="card-content info-container">
                                        <div class="info-content">
                                            <h4 class="info">意大利面</h4>
                                            <div class="info promotions">
                                                <div class="info-left">8.8折，限购两份</div>
                                                <div class="info-right">活动不同享</div>
                                            </div>
                                            <div class="cost">
                                                <h4>￥26.5</h4>
                                                <img class="plus" src="images/plus.png" arl="plus-circle">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex-container card-container">
                                    <div class="card-content img-container">
                                        <img alt="image" src="images/img.jpg" class="card-img">
                                    </div>
                                    <div class="card-content info-container">
                                        <div class="info-content">
                                            <h4 class="info">意大利面</h4>
                                            <div class="info promotions">
                                                <div class="info-left">8.8折，限购两份</div>
                                                <div class="info-right">活动不同享</div>
                                            </div>
                                            <div class="cost">
                                                <h4>￥26.5</h4>
                                                <img class="plus" src="images/plus.png" arl="plus-circle">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex-container card-container">
                                    <div class="card-content img-container">
                                        <img alt="image" src="images/img.jpg" class="card-img">
                                    </div>
                                    <div class="card-content info-container">
                                        <div class="info-content">
                                            <h4 class="info">意大利面</h4>
                                            <div class="info promotions">
                                                <div class="info-left">8.8折，限购两份</div>
                                                <div class="info-right">活动不同享</div>
                                            </div>
                                            <div class="cost">
                                                <h4>￥26.5</h4>
                                                <img class="plus" src="images/plus.png" arl="plus-circle">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex-container card-container">
                                    <div class="card-content img-container">
                                        <img alt="image" src="images/img.jpg" class="card-img">
                                    </div>
                                    <div class="card-content info-container">
                                        <div class="info-content">
                                            <h4 class="info">意大利面</h4>
                                            <div class="info promotions">
                                                <div class="info-left">8.8折，限购两份</div>
                                                <div class="info-right">活动不同享</div>
                                            </div>
                                            <div class="cost">
                                                <h4>￥26.5</h4>
                                                <img class="plus" src="images/plus.png" arl="plus-circle">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div>
                                <div class="tips-container">
                                    <p class="tips-context">
                                        <span>米线</span>
                                    </p>
                                </div>
                                <div>米线Content</div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div>
                                <div class="tips-container">
                                    <p class="tips-context">
                                        <span>套餐</span>
                                    </p>
                                </div>
                                <div>套餐Content</div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div>
                                <div class="tips-container">
                                    <p class="tips-context">
                                        <span>面条</span>
                                    </p>
                                </div>
                                <div>面条Content</div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        <footer class="footer flex-container">
            <div class=" flex-container">
                <div class=" cart-container ">
                    <img id="shoppingCart" alt="shopping-cart" src="images/shoppingcart-active.png" width="60%">
                </div>
                <div class="stlm-info ">
                    <div id="costsForCart">￥52</div>
                    <div id="disc">再购买￥10打9.5折</div>
                </div>
            </div>
            <div class=" footer-content stlm">
                <button class="submit">确定下单</button>
            </div>
        </footer>

        </div>

        <script type="text/javascript">
            $(document).ready(function() {
                var tabsSwiper = new Swiper('#leftContent', {
                    direction: 'vertical',
                    freeMode: true,
                    slidesPerView: 10,
                    spaceBetween: 30,
                    height:"30px",
                });

                var tabsContainerSwiper = new Swiper('#rightContent', {
                    direction: 'vertical',
                    mousewheelControl: true,
                    freeMode: true,
                    autoHeight: true,
                    onSlideChangeEnd: function() {
                        $(".left .active").removeClass('active');
                        $(".left div").eq(tabsContainerSwiper.activeIndex).addClass('active');
                    }
                });

                $(".left div").on('click', function(e) {
                    e.preventDefault();
                    $(".left .active").removeClass('active');
                    $(this).addClass('active');
                    tabsContainerSwiper.slideTo($(this).index());
                });

                $(".left div").click(function(e) {
                    e.preventDefault();
                });

                /*var recmSwiper = new Swiper('#recm', {
                  direction: 'vertical',
                  freeMode: true,
                  mousewheelControl: true,
                  slidesPerView: 'auto',
                  spaceBetween: 30,
                  nested: true,
                });*/

                $(".left").height($('body').height());
            });
      </script>
    </body>

</html>